<template>
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<hx-navbar title="合成" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view v-if="noticeInfo"
			class="tip-bg" 
			:style="{'background':kbuttonBgColor,'top': navBarHeight}"
			@click="pushNotice()">
			<image class="icon" src="@/static/index/details/detail-tips.png" mode="aspectFit"></image>
			<text class="text">{{noticeInfo.title}}</text>
			<uni-icons style="margin-left: auto;margin-right: 20rpx;" type="arrowright" size="20" color="#ffffff"></uni-icons>
		</view>
		<view class="container" :style="{'margin-top': (noticeInfo ? navBarHeight : 0)}" v-if="list && list.length > 0">
			<!-- 		<view class="compound_item" @tap="see_detail(item.id)" v-for="item,id in list" :key="id">

				<image :src="item.image" class="compound_img" mode="aspectFill"></image>

				<view class="info_box">
					<view class="info_text">
						{{item.furnace}}
					</view>
					<view class="info_time">
						<text>
							截止时间: {{item.end_time}}
						</text>
					</view>
					<view class="status2 status" v-if="item.start_status==2">
						活动已结束
					</view>
					<view class="status1 status" v-if="item.start_status==1">
						活动进行中
					</view>
					<view class="status0 status" v-if="item.start_status==0">
						活动即将开始
					</view>
					<view class="jindu">
						<image src="/static/index/btn_bg_medium.png" mode="scaleToFill" class="btn_bg"></image>
						<view class="jindu_text" style="">
							合成进度<text class="yellow">{{item.count}}</text>/{{item.num}}
						</view>
					</view>
				</view>
			</view> -->

			<view class="com_item" @tap="see_detail(item.id,item.type)" v-for="item,id in list" :key="id">
				<image :src="item.image" mode="aspectFill" class="com_img"></image>
				<!-- <view class="jindu"> -->
				<!-- <text style="position: relative;z-index: 10;">
						合成进度{{item.count}}/{{item.num}}
					</text> -->
				<!-- </view> -->
				<view class="com_info">
					<view class="com_name">
						{{item.name}}
					</view>
					<view class="com_time">
						开始时间:
						<p>{{item.startTime |filterTime}}</p>
					</view>
				</view>
			</view>
		</view>
		<view class="none_box" style="text-align: center;" v-if="list.length == 0">
			<image  src="@/static/without.png" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
	//获取系统状态栏高度
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		filters: {
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy-mm-dd hh:MM')
			}
		},
		data() {
			return {
				navBarHeight: (statusBarHeight+44)+ 'px',
				list: [],
				page: 1,
				limit: 10,
				hasNextPage: true,
				noticeInfo:null
			}
		},
		onLoad(options) {
			this.get_data_list()
			this.getNoticeList()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.get_data_list();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500)
		},
		onReachBottom() {
			let new_page = this.page + 1;
			let data = {
				pageNo: new_page,
				limit: this.limit
			}
			this.$api.furnaceList(data, res => {
				if (res.status) {
					this.list = this.list.concat(res.data);
					this.hasNextPage = res.data.length >= this.limit;
					this.page = new_page
				}
			})
		},
		methods: {
			pushNotice(){
				uni.navigateTo({
					url:`/pages/article/index?id=${this.noticeInfo.id}&id_type=2`
				})
			},
			// 获取平台公告列表
			getNoticeList() {
				let data = {
					pageNo: 1,
					categoryId: 3,
				}
				this.$api.notice(data, res => {
					if (res.status) {
						if(res.data && res.data.length >0){
							this.noticeInfo = res.data[0]
						}
					}
				});
			},
			get_data_list: function() {
				let data = {
					pageNo: this.page,
				}
				this.$api.furnaceList(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit;
					}
				})
			},
			see_detail: function(id, type) {
				this.$api.furnacel(id, res => {
					if (res.status) {
						if (res.data.details.length==0 || res.data.items.length==0) {
							this.$common.errorToShow('藏品未设置完成')
						} else {
							//合成
							if (type === 1) {
								uni.navigateTo({
									url: 'compound_page?id=' + id
								})
							} else {
								//分解
								uni.navigateTo({
									url: 'resolve_page?id=' + id
								})
							}
						}
					}else if(res.code=='20001'){
							this.$common.errorToShow(res.message)
					} else {
						this.$common.errorToShow('藏品未设置完成')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tip-bg {
		position: fixed;
		width: 100%;
		height: 98rpx;
		z-index: 199;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		font-weight: 500;
		top:108px;// 104rpx;
		.icon{
			margin-left: 50rpx;
			width: 44rpx;
			height: 44rpx;
		}
		.text{
			width: 72%;
			color: #ffffff;
			margin-left: 20rpx;
			margin-right: 20rpx;
			overflow: hidden;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			display: -webkit-box;
		}
	}
	.com_time {
		font-size: 24rpx;
		color: #999;
		padding-top: 10rpx;
	}

	.com_time2 {
		color: #F2D7AA;
		font-size: 24rpx;
		font-weight: 400;
		padding-top: 10rpx;
	}

	.icon_3d {
		width: 33rpx;
		height: 33rpx;
	}

	.com_name {
		font-size: 28rpx;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.com_info {
		padding: 10rpx 20rpx 0;
	}

	.jindu {
		display: inline-block;
		padding: 10rpx 25rpx;
		border-radius: 100rpx;
		background: $btn-bg;
		font-size: 22rpx;
		color: #fff;
		position: absolute;
		bottom: 132rpx;
		right: 20rpx;
	}

	.btn_bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.com_img {
		width: 100%;
		height: 324rpx;
		border-radius: 20rpx;
	}

	.com_item {
		width: 48%;
		height: 470rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0rpx 9rpx 18rpx 0rpx rgba(156, 156, 156, 0.6);
	}

	.mart_goods_bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 188rpx;
	}

	.container {
		width: 100%;
		padding: 30rpx 40rpx;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
</style>

<style lang="scss" scoped>
	.num {
		color: #F4E1BC;
	}

	.info_time {
		padding-top: 15rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 33rpx;
		font-size: 24rpx;
		color: #999;
	}

	.info_text {
		line-height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.info_box {
		flex: 1;
		padding-left: 20rpx;
	}

	.compound_img {
		width: 198rpx;
		height: 198rpx;
		border-radius: 10rpx;
	}

	.compound_item {
		display: flex;
		align-items: center;
		width: 100%;
		// height: 230rpx;
		background: $bg-box;
		opacity: 1;

		padding: 20rpx;
		border-bottom: 1rpx solid #D9D9D9;
		position: relative;

		.status0 {
			position: absolute;
			background-color: #FAF8FF;
			color: #F3B012;
			border: 1rpx solid #F3B012;
		}

		.status1 {
			background-color: #F6FFF2;
			color: #69AD4F;
			border: 1rpx solid #69AD4F;
		}

		.status2 {
			background-color: #FCF8F8;
			color: #D55C57;
			border: 1rpx solid #D55C57;
		}

		.status {
			width: 190rpx;
			margin: 10rpx 0;
			text-align: center;
			font-size: 24rpx;
			padding: 2rpx 20rpx;
			border-radius: 10rpx;

		}
	}

	page {}
</style>